<template>
  <div class="crash-report9">
    <el-row>
      <el-col :span="24">
        <h4 class="http-code-title" style="padding-left: 15px; font-size: 18px;">HTTP状态码错误率</h4>
        <div class="http-code-box">
          <div id="statusCode-report" style="width: 100%; height:350px;" v-loading="statusCodeLoading"></div>
          <span class="rotate-line1"></span>
          <span class="rotate-line2"></span>
          <div class="http-code-table">
            <span class="left-top-angle"></span>
            <span class="right-top-angle"></span>
            <span class="left-bottom-angle"></span>
            <span class="right-bottom-angle"></span>
            <div class="http-code-radius"></div>
            <el-table :data="codeTopList" border size="mini">
              <el-table-column prop="code" label="错误代码" align="right" width="70"></el-table-column>
              <el-table-column prop="description" label="代码解释" align="center" width=""></el-table-column>
              <el-table-column prop="rate" label="占比" align="left" width="64"></el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import echarts from 'echarts'

  var resultData = [
    { value: 51.53, name: '404' },
    { value: 4.01, name: '502' },
    { value: 4.74, name: '500' },
    { value: 6.22, name: '503' },
    { value: 24.06, name: '403' },
    { value: 3.50, name: 'other' },
    { value: 2.97, name: '401' },
    { value: 2.95, name: '400' }
  ]

  var codeTopList = [
    {code: '404', description: '服务器找不到请求的网页', rate: '51.53%'},
    {code: '403', description: '服务器拒绝请求', rate: '24.06%'},
    {code: '503', description: '无法为请求提供服务', rate: '6.22%'},
    {code: '500', description: '服务器遇到错误，无法完成请求', rate: '4.74%'}
  ]

  export default {
    data () {
      return {
        statusCodeLoading: false,
        chartsInstance: {
          statusCode: ''
        },
        resultData: resultData,
        codeTopList: codeTopList
      }
    },
    activated () {
      this.initEcharts()
    },
    methods: {
      initEcharts () {
        var vm = this
        vm.chartsInstance.statusCode = echarts.init(document.getElementById('statusCode-report'))
        vm.getStatusCodeReport()
        window.addEventListener('resize', () => {
          vm.chartsInstance.statusCode.resize()
        })
      },
      getStatusCodeReport () {
        var vm = this
        vm.statusCodeLoading = true
        var option = {
          title: {
            text: 'Andriod',
            top: 'center',
            // left: '21.5%',
            left: 200,
            textStyle: {
              fontSize: 12,
              color: '#333'
            }
          },
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          roam: false, // 鼠标缩放及平移
          focusNodeAdjacency: false, // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
          // color: ['#345BA0', '#3F8B65', '#61B34A', '#6FA1CC', '#34A0D9', '#3191D8', '#378AAC', '#2B76B3'],
          // color: ['#2F4554', '#61A0A8', '#D48265', '#91C7AE', '#749F83', '#CA8622', '#BDA29A', '#6E7074'],
          color: ['#345BA0', '#00A65A', '#3F8B65', '#605ca8', '#34A0D9', '#00C0EF', '#F39C12', '#FF851B'],
          series: [
            {
              name: '状态码',
              type: 'pie',
              startAngle: 90,
              hoverAnimation: false,
              radius: [65, 95],
              // center: ['24%', '50%'],
              center: [230, '50%'],
              itemStyle: {
                normal: {
                  borderWidth: 1,
                  borderColor: '#fff',
                  labelLine: {
                    length: 35,
                    show: false
                  }
                }
              },
              label: {
                normal: {
                  show: false,
                  formatter: '{d}%\n{b}'
                }
              },
              data: vm.resultData
            },
            {
              name: '状态码',
              type: 'pie',
              startAngle: 90,
              hoverAnimation: false,
              radius: [96, 101],
              // center: ['24%', '50%'],
              center: [230, '50%'],
              itemStyle: {
                normal: {
                  borderWidth: 4,
                  borderColor: '#fff',
                  label: {
                    show: true,
                    formatter: '{per|{d}}%\n{b|{b}}',
                    rich: {
                      per: {
                        fontSize: 12,
                        fontWeight: 700
                      },
                      b: {
                        color: '#fff',
                        backgroundColor: '#334455',
                        padding: [1, 2],
                        borderRadius: 1
                      }
                    }
                  },
                  labelLine: {
                    show: true
                    //  length: 20
                  }
                }
              },
              data: vm.resultData
            }
          ]
        }
        vm.chartsInstance.statusCode.setOption(option)
        vm.statusCodeLoading = false
      }
    }
  }
</script>
<style scoped>
.el-row{
  margin-bottom: 20px;
}
.http-code-title{
  font-size: 18px;
}
.http-code-box{
  position: relative;
  width: 900px;
  margin: 0 auto;
}
.rotate-line1{
  width: 200px;
  height: 1px;
  position: absolute;
  top: 105px;
  left: 252px;
  border-top: 1px solid #345BA0;
  transform:rotate(15deg);
  -ms-transform:rotate(15deg); 	/* IE 9 */
  -moz-transform:rotate(15deg); 	/* Firefox */
  -webkit-transform:rotate(15deg); /* Safari 和 Chrome */
  -o-transform:rotate(15deg);
}
.rotate-line2{
  width: 200px;
  height: 1px;
  position: absolute;
  top: 244px;
  left: 252px;
  border-top: 1px solid #345BA0;
  transform:rotate(-15deg);
  -ms-transform:rotate(-15deg); 	/* IE 9 */
  -moz-transform:rotate(-15deg); 	/* Firefox */
  -webkit-transform:rotate(-15deg); /* Safari 和 Chrome */
  -o-transform:rotate(-15deg);
}
.http-code-table{
  display: inline-block;
  width: 350px;
  height: 350px;
  position: absolute;
  top: -5px;
  left: 442px;
  z-index: 100;
}
.left-top-angle{
  width: 43px;
  height: 50px;
  position: absolute;
  top: 43px;
  left: 0;
  background-color: #fff;
  z-index: 99;
}
.right-top-angle{
  width: 43px;
  height: 50px;
  position: absolute;
  top: 43px;
  right: 0;
  background-color: #fff;
  z-index: 99;
}
.left-bottom-angle{
  width: 43px;
  height: 50px;
  position: absolute;
  left: 0;
  bottom: 43px;
  background-color: #fff;
  z-index: 99;
}
.right-bottom-angle{
  width: 43px;
  height: 50px;
  position: absolute;
  right: 0;
  bottom: 43px;
  background-color: #fff;
  z-index: 99;
}
.http-code-table .http-code-radius{
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  border: 20px solid #E3ECF5;
  z-index: 100;
}
.http-code-table .el-table{
  width: 86%;
  position: absolute;
  top: 78px;
  left: 28px;
  z-index: 98; 
}
</style>

